<!DOCTYPE html>
<html>

<head>
    <title>绑定用户</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="">

    <link rel="stylesheet" href="dist/lib/weui.css">
    <link rel="stylesheet" href="dist/css/build.css">
    <link rel="stylesheet" href="dist/css/jquery-weui.css">
    <link rel="stylesheet" href="dist/css/autosearch.css">
    <style>
        body {
            background: #f5f5f5;
            height: 100%;
        }

        .weui-cells.weui-cells_form {
            background: #fff;
            /*border-bottom: 1px solid #EDEDED;*/
            /*-moz-box-shadow: 2px 2px 5px #333333;*/
            /*-webkit-box-shadow: 0px 2px 15px #eee;*/
            /*box-shadow: 0px 2px 15px #eee;*/
        }

        .weui-cell__ft {
            border: none;
        }

        .weui-vcode-btn {
            border: none;
            font-size: 16px;
            margin-right: 5px;
        }

        /*.weui-cell.weui-check__label{*/
        /*width: 40%; display: inline-block;*/
        /*}*/
        .weui-cell.chick {
            display: inline-flex;
            width: 40%;
        }

        .radio.radio-danger {
            margin-left: 0px;
            padding-left: 0px;
            vertical-align: center;
        }

        .radio.radio-danger label {
            padding-right: 30px;
        }

        /*.weui-footer{*/
        /*position: absolute;*/
        /*float: bottom;*/
        /*}*/
        .ui-autosearch-content {
            height: 100%;
        }

        .ui-autosearch-content .item {
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>

<body>


<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="tel" value="" type="text" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11" pattern="[0-9]*" placeholder="请输入手机号">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="name" type="text" placeholder="请输入姓名">
        </div>
    </div>


    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
        <div class="radio radio-danger">
            <input type="radio" name="radio2" id="radio3" value="1" checked>
            <label for="radio3">男</label>
        </div>
        <div class="radio radio-danger">
            <input type="radio" name="radio2" id="radio4" value="2">
            <label for="radio4">女</label>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">律师所</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input autosearch" type="text" placeholder="请输入选择">
            <input type="hidden" name="hd_id" id="hd_id">
        </div>
    </div>

    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
            <label class="weui-label">验证码</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="code" value="" type="text" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="4" placeholder="请输入验证码">
        </div>
        <div class="weui-cell__ft">
            <button class="weui-vcode-btn" id="verCodeBtn">获取验证码</button>
        </div>
    </div>

</div>

<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>

<div class="weui-msg__extra-area">
    <div class="weui-footer">
        <p class="weui-footer__links">
            <a href="javascript:void(0);" class="weui-footer__link">中共东莞市律师行业委员会</a>
        </p>
        <p class="weui-footer__text">Copyright © 2008-2020</p>
    </div>
</div>
<script src="dist/lib/jquery-2.1.4.js"></script>
<script src="dist/lib/fastclick.js"></script>
<script src="dist/lib/autosearch.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });

    function open() {
        $("#popup").popup();
    }

    function close() {
        $.closePopup()
    }
</script>
<script src="dist/js/jquery-weui.js"></script>
<script src="dist/lib/vue.min.js"></script>
<script src="dist/lib/http.js"></script>
<script src="dist/lib/jquery.cookie.js"></script>


<script>
    var radios = document.querySelectorAll('input[type="radio"]');

    /**
     * 判断输入框值
     */
    $("#showTooltips").click(function () {
        var tel = $('#tel').val();
        var name = $('#name').val();
        var code = $('#code').val();
        var hd_id = $('#hd_id').val();

        if (!tel || !/1[3|4|5|7|8]\d{9}/.test(tel)) {
            $.toptip('请输入手机号')
        } else if (!name || '') {
            $.toptip('请输入姓名')
        } else if (!hd_id || '') {
            $.toptip('请选择律师所')
        } else if (!code || !/\d{4}/.test(code)) {
            $.toptip('请输入4位手机验证码')
        } else if (CheckVerCode(tel, code) != 1) {
            $.toptip('手机验证码不正确')
        } else {
            var ros = {
                name: name,
                sex: checkRadio(),
                phone: tel,
                wechatId: tel,
                tag: hd_id
            };
            postData(ros);
        }

    });

    /**
     * 获取单选框值
     * @returns {*}
     */
    function checkRadio() {
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                return radios[i].value;
            }
        }
    }

    /**
     * 验证码,获取验证码
     */
    var colock = '';
    var num = 59;
    $("#verCodeBtn").on("click", function () {
        var tel = $('#tel').val();
        if (!tel || !/1[3|4|5|7|8]\d{9}/.test(tel)) {
            $.toptip('请输入手机号');
            return;

        } else {
            postVerCode(tel);
        }

        $("#verCodeBtn").attr("disabled", "true");
        $("#verCodeBtn").html(num + "s重新获取");

        colock = setInterval(doLoop, 1000); //一秒一次

    })

    /**
     * 倒计时
     */
    function doLoop() {
        num--;
        if (num > 0) {
            $("#verCodeBtn").html(num + "s重新获取");
        } else {
            clearInterval(colock); //
            $("#verCodeBtn").removeAttr("disabled");
            $("#verCodeBtn").html("获取验证码");
            num = 59;
        }
    }

    function postVerCode(phone) {
        $http.post($http.getVerCode(phone)).then(function (data) {
            if (data.success == true) {
                $.toast('短信已发送，请注意查收')
            } else {
                alert(data.message)
            }
        }, function (err) {
            console.log(err);
            return err;
        });
    }

    function CheckVerCode(phone, code) {
        var open = ''
        $http.post($http.CheckVerCode(phone, code)).then(function (data) {
            if (data.success == true) {
                open = 1;
            } else {
                open = 0;
            }
        }, function (err) {
            console.log(err);
            return err;
        });
        return open;
    }

    /**
     * 提交数据
     * @param ros
     */
    function postData(ros) {
        $http.post($http.postLogin(ros)).then(function (data) {
            console.log(data);

            if (data.success == true) {
                // 缓存登录信息
                getLawyerLogin(ros.phone);

            } else {
                $.modal({
                    title: "错误",
                    text: data['message'],
                    buttons: [{
                        text: "我知道了",
                        onClick: function () {
                            $.hideLoading();
                            if (ros.phone != null) {
                                getLawyerLogin(ros.phone);
                            }
                        }
                    }]
                });

            }
        }, function (err) {
            console.log(err);
            return err;
        });

    }

    /**
     * 获取登录信息并且实现跳转界面
     * @param phone
     */
    function getLawyerLogin(phone) {

        // falg =false 根据缓存手机更新缓存
        $http.post($http.getLawyer(phone)).then(function (data) {

            if (data.success == true) {
                // 永久保存登录信息
                // alert(1)
                localStorage.Lawyer = JSON.stringify(data['data']);

                // 跳转页面
                $http.interfaceJump('', true);

            } else {
                $.alert("错误", function () {
                    window.location.href = 'index.html';
                });
            }

        });
    }

    getLsxx();

    function getLsxx() {

        // falg =false 根据缓存手机更新缓存
        $http.post($http.getDictionary(5)).then(function (data) {
            if (data.success === true) {
                // 永久保存登录信息
                localStorage.Dictionary = JSON.stringify(data['data']);
            } else {
                $.alert("错误", function () {
                    // window.location.href = 'index.html';
                });
            }
        });
    }

    /**
     * 输入搜索
     * @type {*|void|jQuery|HTMLElement}
     */
    setTimeout(function () {
        var input = $('.autosearch');
        var autosearch = new AutoSearch();
        var getdata = JSON.parse(localStorage.Dictionary);
        autosearch.init({
            input: input,
            autoShow: true,
            data: getdata,
            valueObj: '#hd_id',
            filterColumn: ['name'],
            column: ['name'],
            valueName: "name"
        });
    }, 2000)


</script>
</body>

</html>